<template>
  <!--退货单明细-->
  <div>
    <!--全部-->
    <div>
      <!--value报错-->
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="datavalue" placeholder="全部数据">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input placeholder="请输入内容" style="width: 150px"></el-input>
      <el-select v-model="jhValue" placeholder="产品名称" style="width: 140px">
        <el-option v-for="item in jhOptions" :key="item.value"
                   :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button icon="el-icon-search" size="small" circle></el-button>
    </div>
    <!--新建/编辑-->
    <div style="margin-top: 15px;overflow: hidden;">
      <div class="col-sm-交付计划6 text-left" style="margin-bottom: 20px">
        <span set-lan="html:退货单明细">退货单明细</span>
        <small class="text-muted font-13">共0条</small>
      </div>
       <div class="col-sm-6 text-right">
         <el-button type="text" @click="dialogFormVisible = true">
           <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
         </el-button>
       </div>
      <!--退货单(订单退货) dialog-->
      <el-dialog title="退货单明细" :visible.sync="dialogFormVisible" width="60%" style="color: #333333"  >
        <el-form :model="ListItem" label-width="100px" :rules="rules">
          <hr style="margin-top: -20px;margin-bottom: 15px">

        </el-form>
        <div slot="footer" class="dialog-footer">
        </div>
      </el-dialog>
    </div>
    <el-table ref="multipleTable" :data="ListItemTable" tooltip-effect="dark"
              style="width: 100%"  @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="id" label="ID" wsortable></el-table-column>
      <el-table-column prop="returns" label="退货单" ></el-table-column>
      <el-table-column prop="product_name" label="产品名称" ></el-table-column>
      <el-table-column prop="return_reason" label="退货原因" ></el-table-column>
      <el-table-column prop="return_num" label="退货数量" ></el-table-column>
      <el-table-column prop="return_amount" label="退货金额" ></el-table-column>
      <el-table-column prop="storage_num" label="已入库数量" ></el-table-column>
      <el-table-column prop="note" label="备注" ></el-table-column>
      <el-table-column prop="" label="操作" width="135px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)"
                     icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
          <el-button size="mini" @click="handleDelete(scope.row)"
                     icon="el-icon-delete" type="danger" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row>
      <el-col :span="8">
        <el-button style="padding: 12px 10px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
      </el-col>
      <el-col :span="16">
        <el-pagination :page-size="100" layout="prev, pager, next, jumper"
                       :total="1000"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      //头部搜索框
      jhOptions: [{
        value: '1',
        label: '主题'
      }, {
        value: '2',
        label: '产品名称'
      }],
      jhValue: '',
      //导航搜索
      activeIndex: '2',
      /*下拉框条件查询*/
      options: [{
        value: '选项1',
        label: '全部数据'
      }],
      datavalue:'',
      dialogFormVisible: false,
      totalSize: 0,
      ListItemTable: [{
        id:1,
        returns:'退货单1',
        product_name:'滴滴滴',
        return_reason:'太难弄了',
        return_num:1000,
        return_amount:100.00,
        storage_num:1000,
        note:'不知道说甚'
      }, {
        id:2,
        returns:'退货单2',
        product_name:'888',
        return_reason:'太了',
        return_num:100,
        return_amount:100.00,
        storage_num:100,
        note:'不'
      }],
      ListItem: {
        id:0,
        returns:'',//退货单
        product_name:'',//产品名称
        return_reason:'',//退货原因
        return_num:0,//退货数量
        return_amount:0.00,//退货金额
        storage_num:0,//已入库数量
        note:''//备注
      },
      //弹出框的期次
      periods: [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '2'
      }, {
        value: '选项3',
        label: '3'
      }, {
        value: '选项4',
        label: '4'
      }, {
        value: '选项5',
        label: '5'
      }, {
        value: '选项6',
        label: '6'
      }],
      //状态
      status: [{
        value: '选项1',
        label: '未付'
      }, {
        value: '选项2',
        label: '已付'
      }, {
        value: '选项3',
        label: '不提醒'
      }],
      statuvalue:'',
      periodvalue: '',
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,

      rules: {
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]},
      mulSelection: []
    }
  },
  methods: {
    // 导航搜索
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleEdit (val) {
      this.dialogFormVisible = true
      this.Invoice = val
    },
    openView (val) {
      this.$axios.post('http://localhost:8080/#/deliveryplanview')
    },
    handleDelete (val) {
      this.$confirm('此操作将永久删除销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(val['id'])
        this.$axios.post('http://localhost:8080/save-emp', this.qs.stringify(val['id']))
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    deleteAll () {
      this.mulSelection.forEach(row => {
        console.log(row)
        this.$axios.post('http://localhost:8080/#/deliveryplanview', this.qs.stringify(row))
      })
    },
    //客户签约人与我方签约人
    loadAll() {
      return [
        { "value": "陈浩南", "address": "crm工大小组" },
        { "value": "张三疯", "address": "crm工大小组" }
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style>
  .font-14{
    font-size: 14px
  }
  .col-sm-6 {
    width: 50%;
    position: relative;
    min-height: 1px;

  }
  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-left{
    text-align: left;
    float: left;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
</style>
